<template>
      <div>
       <!-- 推荐区 -->
        <div class="recomParent">
          <div class="recommend clearfix">
            <div v-if="JSON.stringify(symbolTop) == '{}'">
              <div v-for="item in 5" class="recomm-content borderbox"></div>
            </div>
            <div class="recomm-content pointer borderbox" v-for="(item, index) in symbolTop" :key="index" @click="toCoinTrade(item.name)" v-else>
              <div class="content">
                <div class="symbol_buy clearfix">
                  <span class="symbolFor">{{item.name}}</span>
                  <span class="symbolIcon">
                  <i class="icon-arrow-up2" v-if="item.rose.class === 'c-rise'"></i>
                  <i class="icon-arrow-down2" v-else-if="item.rose.class === 'c-fall'"></i>
                  <i v-else></i>
                </span>
                  <b :class="item.rose.class">{{item.rose.data}}</b>
                </div>
                <p class="price" :class="[item.close.class, item.rose.class]"><span class="curPrice">{{item.close.data.split('/')[0]}}</span>&nbsp;<span class="rmb"><span style="font-size: 16px;">/</span>{{item.close.data.split('/')[1]}}</span></p>
                <span class="turnover">
                {{$t('main.deal_forehead')}}&nbsp;{{item.amount}}&nbsp;{{item.symbolname}}
              </span>
              </div>
              <div class="chart_box" :id="'chart_'+ index"></div>
            </div>
          </div>
        </div>
        <div class="marketParent">
          <!-- 市场行情标题 -->
          <div class="marketTitle">{{$t('myAdd.home.market')}}</div>
          <!--币对市场-->
          <div class="market" ref="market">
            <div class="header bg-color" ref="marketHeader">
              <div class="center">
                <ul>
                  <li v-for="(value,key,index) in baseData._symbols"
                      v-if ="(key !== 'myMarket')"
                      :key="index" @click="tabTog(key)"
                      :class='{findactive:key === markTitle}'
                      class="coin_currency">
                    <span>
                      <template v-if="baseData._coinList[key]">
                        <!--<img :src="baseData._coinList[key].icon" v-if="baseData._coinList[key].icon">-->
                      </template>
                      <img src="@/assets/img/coindef.png" v-else>
                      {{key}}
                    </span>
                  </li>
                  <li :class="{findactive:'myMarket' === markTitle}" @click="tabTog('myMarket')">
                  <span>
                    <i class="icon-store" v-if="'myMarket' === markTitle"></i>
                    <i class="icon-cor icon-store" v-else ></i>
                    {{$t('main.marketSet')}}
                  </span>
                  </li>
                </ul>
                <div class="inputBox">
                  <div class="search" :class="{active:frame}"><i class="sos icon-search"></i> <input class="bg-color" type="text" v-model="search" @focus="issue" @blur="lose"> </div>
                </div>
              </div>
            </div>
            <div class="mark-box" ref="marketBox">
              <!-- <p style="display: none">{{aaa}}</p> -->
              <div ref="tableDiv">
                <table>
                  <thead ref="thead">
                  <tr class="bg-color">
                    <th class="market_title market_title_align">{{this.$t('main.market')}}</th>
                    <th @click="marketSort('close')"
                        class="new_price newprice_align">
                      {{this.$t('main.close')}}
                      <span class="receet">
                        <i class="sorte up  iconNoFont-sup" :class="{cur: sortType === 'down'}"></i>
                        <i class="sorte down iconNoFont-sdow"  :class="{cur: sortType === 'up'}"></i>
                      </span>
                    </th>
                    <th class="highprice_align">{{this.$t('main.height')}}</th>
                    <th class="lowprice_align">{{this.$t('main.low')}}</th>
                    <th @click = "volSort('vol')"
                        class="vol_align">
                      24H{{this.$t('main.vol')}}
                      <span class="receet">
                        <i class="sorte up iconNoFont-sup" :class="{curr: sortType === 'volDow'}"></i>
                        <i class="sorte down iconNoFont-sdow" :class="{curr: sortType === 'volUp'}"></i>
                      </span>
                    </th>
                    <th @click="amountSort('amount')"
                        class="amount_align">
                      24H{{this.$t('main.amount')}}
                      <span class="receet">
                        <i class="sorte up iconNoFont-sup" :class="{curr: sortType === 'amountDow'}"></i>
                        <i class="sorte down iconNoFont-sdow" :class="{curr: sortType === 'amountUp'}"></i>
                      </span>
                    </th>
                    <th @click="marketSor('rose')"
                        class="rise rise_align">24H{{this.$t('main.rose')}}
                      <span class="receet">
                        <i class="sorte up iconNoFont-sup" :class="{curr: sortType === 'dow'}"></i>
                        <i class="sorte down iconNoFont-sdow" :class="{curr: sortType === 'ups'}"></i>
                      </span>
                    </th>
                  </tr>
                  </thead>
                </table>
              </div>
              <div class="scroll">
                <div class="area mainArea">{{$t('myAdd.home.mainArea')}}
                  <span class="introduce pointer" @click="mainRemarkClick">{{$t('myAdd.home.introduce')}} <i class="icon-right"></i></span>
                </div>
                <!--<div class="mainRemark remark" v-show="showMainRemark" v-html="mainRemark">

                </div>-->
                <table>
                  <tbody v-if="symbolListArr.length > 0">
                  <tr v-for="(item, index) in symbolListArr" v-if="item.isShow" :key="index" :class="{symboy_bgc: index % 2 === 0 }" class="pointer" @click="transaction(item.symbol)">
                    <td class="mark">
                      <i :class="{findactive:myMarket.indexOf(item.symbol) > -1}" class="icon-store" v-if="myMarket.indexOf(item.symbol) > -1 "  @click.stop="changeMysymbol(item.symbol)" ></i>
                      <i class="icon-cor icon-nostore"  @click.stop="changeMysymbol(item.symbol)"  v-else></i>
                      <span>{{item.symbol && item.symbol.split('/')[0] + ' / ' + item.symbol.split('/')[1]}}</span>
                    </td>
                    <td :class="item.close.class === 'c-fall'? 'c-rise': 'c-fall'" class="newprice_align">{{item.close.data && item.close.data.split('/')[0] + ' / ' + (item.close.data.split('/')[1] ? item.close.data.split('/')[1] : '--')}}</td>
                    <td class="highprice_align">{{item.high}}&nbsp;{{item.coin}}</td>
                    <td class="lowprice_align">{{item.low}}&nbsp;{{item.coin}}</td>
                    <td class="vol_align">{{item.vol}}&nbsp;{{item.symbolname}}</td>
                    <td class="amount_align">{{item.amount}}&nbsp;{{item.coin}}</td>
                    <td :class="item.rose.class" class="rise_align" >{{item.rose.data}}</td>
                  </tr>
                  </tbody>
                  <tbody v-else>
                  <tr class="noHover"><td colspan="8" class="no_data">{{contentText.nodeDataText}}</td></tr>
                  </tbody>
                </table>
              </div>
              <div class="scroll">
                <div class="area mainArea">{{$t('myAdd.home.innovationArea')}}
                  <span class="introduce pointer" @click="innovateRemarkClick" >{{$t('myAdd.home.introduce')}} <i class="icon-right"></i></span>
                </div>
                <!-- <div class="innovateRemark remark" v-show="showInnovateRemark" v-html="innovateRemark"></div>-->
                <table>
                  <tbody v-if="symbolListInnovationArr.length > 0">
                  <tr v-for="(item, index) in symbolListInnovationArr" v-if="item.isShow" :key="index" :class="{symboy_bgc: index % 2 === 0 }" class="pointer" @click="transaction(item.symbol)">
                    <td class="mark">
                      <i :class="{findactive:myMarket.indexOf(item.symbol) > -1}" class="icon-store" v-if="myMarket.indexOf(item.symbol) > -1 "  @click.stop="changeMysymbol(item.symbol)" ></i>
                      <i class="icon-cor icon-nostore"  @click.stop="changeMysymbol(item.symbol)"  v-else></i>
                      <span>{{item.symbol && item.symbol.split('/')[0] + ' / ' + item.symbol.split('/')[1]}}</span>
                    </td>
                    <td :class="item.close.class === 'c-fall'? 'c-rise': 'c-fall'" class="newprice_align">{{item.close.data && item.close.data.split('/')[0] + ' / ' + (item.close.data.split('/')[1] ? item.close.data.split('/')[1] : '--')}}</td>
                    <td class="highprice_align">{{item.high}}&nbsp;{{item.coin}}</td>
                    <td class="lowprice_align">{{item.low}}&nbsp;{{item.coin}}</td>
                    <td class="vol_align">{{item.vol}}&nbsp;{{item.symbolname}}</td>
                    <td class="amount_align">{{item.amount}}&nbsp;{{item.coin}}</td>
                    <td :class="item.rose.class" class="rise_align" >{{item.rose.data}}</td>
                  </tr>
                  </tbody>
                  <tbody v-else>
                  <tr class="noHover"><td colspan="8" class="no_data">{{contentText.nodeDataText}}</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <p v-if="!public_info"></p>
        </div>
        <!-- 介绍弹窗组件 -->
        <introdeuce
          :showInnovateRemark='showInnovateRemark'
          :showMainRemark='showMainRemark'
          :innovateRemark="innovateRemark"
          :mainRemark="mainRemark"
          @closeRemark="closeRemark"
        ></introdeuce>
        </div>
</template>
<script>
import echarts from 'echarts'
import { mapState } from 'vuex'
import pako from 'pako' // gzip压缩工具
import eventBus from '../../../apis/bus'  // 引入bus
import introdeuce from './addVue/introduce' // 引入主板区介绍弹窗

export default {
  name: 'm-main',
  components: {introdeuce},
  computed: {
    ...mapState({
      public_info ({baseData}) {
        if (baseData.isReady && this.firstFlag) {
          this.baseData = baseData
          this.innovateRemark = baseData._innovateRemark
          this.mainRemark = baseData._mainRemark
          this.lang = baseData._lan
          this.creatWs()
          this.firstFlag = false
          return true
        } else {
          return true
        }
      }
    }),
    contentText () {
      return {
        nodeDataText: this.$t('main.loading_ing')
      }
    }
  },
  data () {
    return {
      flag: true,
      firstFlag: true,
      isArr: [], // 轮播图数据
      mack: 0,   // 图片索引
      time: null, // 定时器
      marketListWS: null,
      topMarket: null,
      symbolTop: {},
      skin: '',
      markTitle: localStorage.getItem('homeMarkTitle'),
      symbolListData: {},
      symbolListArr: [], // 2018.10.10把他当作主板区数据
      symbolListInnovationArr: [], // 2018.10.10把他当作创新区数据
      lastSymbol: [],
      search: null,
      lang: localStorage.getItem('lan'),
      rate: '',
      baseData: {},
      innovateRemark: '', // 创新区介绍
      mainRemark: '', // 主区介绍
      showInnovateRemark: false,
      showMainRemark: false,
      aaa: '',
      frame: false,
      sortName: null,
      sortType: null,
      topMarketTrade: null,
      klineData: null,
      klineKey: null,
      myEcharts: {},
      theme: this.$store.state.baseData._theme,
      myMarket: localStorage.getItem('myMarket')
        ? localStorage.getItem('myMarket').split(',')
        : []
    }
  },
  mounted () {
    // 监听滚轮事件
    window.addEventListener('scroll', this.handleScroll)
    // let htmlW = document.documentElement.clientWidth || document.body.clientWidth
   /* this.$refs.recomParent.style.width = htmlW + 'px'
    this.$refs.recomParent.style.transform = - htmlW / 2 + 'px' */
  },
  destroyed () {
    if (this.marketListWS) {
      this.marketListWS.onclose()
    }
    if (this.topMarket) {
      this.topMarket.onclose()
    }
  },
  watch: {
    // 监听货币对搜索
    search (val) {
      for (let i = 0; i < this.symbolListArr.length; i++) {
        this.symbolListArr[i].symbol.split('/')[0].indexOf(val.toUpperCase()) === -1
          ? (this.symbolListArr[i].isShow = false)
          : (this.symbolListArr[i].isShow = true)
      }
    },
    'symbolListData' (value) {
      this.symbolListArr = [] // 主板区清空数组
      this.symbolListInnovationArr = [] // 创新区 清空数组
      let arr = []
      for (let item in value) {
        arr.push(value[item])
      }
      /* if (arr.length < 1) {
        this.contentText.nodeDataText = this.$t('main.no_data')
      } */
      // 以下代码区分出主板区和创新区
      arr.forEach((item) => {
        if (item.isMain) {
          this.symbolListArr.push(item)
        } else {
          this.symbolListInnovationArr.push(item)
        }
      })
      if (this.symbolListArr.length < 1) {
        this.contentText.nodeDataText = this.$t('main.no_data')
      }
      if (this.symbolListInnovationArr.length < 1) {
        this.contentText.nodeDataText = this.$t('main.no_data')
      }
      // this.symbolListArr = arr
    },
    //  监听皮肤切换
    '$store.state.baseData._theme' (val, old) {
      if (!val) return false
      this.theme = val
      if (old) {
        for (let item in this.myEcharts) {
          this.myEcharts[item].setOption({
            series: {
              lineStyle: {
                normal: {
                  color: this.$store.state.color.HomeChartColor[this.theme].lineStyle,
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: this.$store.state.color.HomeChartColor[this.theme].areaStyle
                }
              }
            }
          })
        }
      }
    }
  },
  methods: {
    eachart (data, key) {
      this.myEcharts[key].resize()
      this.myEcharts[key] && this.myEcharts[key].setOption({
        series: [
          {
            data: data
          }
        ]
      })
    },
    initEachart (data, key) {
      this.myEcharts[key] = echarts.init(document.getElementById('chart_' + key))
      // 绘制图表
      this.myEcharts[key] && this.myEcharts[key].setOption({
        grid: {
          left: 0,
          bottom: 0,
          top: 0,
          right: 0
        },
        xAxis: {
          show: false,
          type: 'category',
          min: 'dataMin',
          max: 'dataMax'
        },
        yAxis: {
          show: false,
          type: 'value',
          min: 'dataMin',
          max: 'dataMax'
        },
        series: [{
          data: data,
          type: 'line',
          symbol: 'none',
          // smooth: true,
          lineStyle: {
            normal: {
              color: this.$store.state.color.HomeChartColor[this.theme].lineStyle,
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: this.$store.state.color.HomeChartColor[this.theme].areaStyle
            }
          }
        }]
      })
    },
    // 市场切换
    tabTog (key) {
      if (key === 'myMarket') {
        if (this.baseData.isLogin) {
          this.getoptional()
        }
      }
      if (this.markTitle === key) {
        return
      }
      for (let i = 0; i < this.lastSymbol.length; i++) {
        this.sedWs(this.lastSymbol[i], 'unsub')
      }
      key !== 'myMarket' && localStorage.setItem('homeMarkTitle', key) // 设置本地存储，当前查看的市场
      this.markTitle = key
      this.markList()
    },

    creatWs () {
      // 创建ws
      this.marketListWS = new WebSocket(this.baseData._ws)
      this.marketListWS.binaryType = 'arraybuffer' // 显示指定收到的数据类型
      this.topMarket = new WebSocket(this.baseData._ws) // 顶部横栏展示币对
      this.topMarket.binaryType = 'arraybuffer'
      // 建立连接
      this.marketListWS.onopen = evt => {
        this.markList()
      }
      // 获取数据
      this.marketListWS.onmessage = evt => {
        var na = new Uint8Array(evt.data)
        if (na.length > 0) {
          let data = JSON.parse(pako.inflate(na, { to: 'string' }))
          if (data['ping']) {
            this.marketListWS.send(JSON.stringify({ pong: data['ping'] }))
          } else if (data.tick) {
            let symbol = data.channel.split('_')[1]
            let symboList = this.baseData._symbols[this.markTitle]
            for (let v in symboList) {
              if (symboList[v].symbol === symbol) { // 根据后台返回的币对行情信息匹配到vuex里面对应的币对
                this.addWsListData(symboList[v].name, data.tick)
              }
            }
          }
        }
      }
      this.marketListWS.onclose = evt => {
        console.log('关闭', evt)
      }
      this.marketListWS.onerror = evt => {
        console.log('错误', evt)
      }
      // 建立连接
      this.topMarket.onopen = ev => {
        this.symbolTopList()
      }
      // 获取数据
      this.topMarket.onmessage = evt => {
        var na = new Uint8Array(evt.data)
        if (na.length > 0) {
          let data = JSON.parse(pako.inflate(na, { to: 'string' }))
          if (data['ping']) {
            this.topMarket.send(JSON.stringify({ pong: data['ping'] }))
          } else if (data.event_rep && data.event_rep === 'rep' && data.data) { // 1分钟K线历史
            let key = data.channel.split('_')[1]
            if (!this.symbolTop[key]) return false
            this.myEcharts[key] = true
            if (data.data.length <= 0) return false
            this.symbolTop[key].kline = []
            for (let i = data.data.length - 1; i >= 0; i--) {
              if (i <= data.data.length - 100) break
              this.symbolTop[key].kline.push([data.data[i].id, data.data[i].close])
            }
            this.symbolTop[key].kline.reverse()
            this.initEachart(this.symbolTop[key].kline, key)
          } else if (data.tick && data.channel.indexOf('_kline_') > -1) { // 1分钟K线
            let key = data.channel.split('_')[1]
            if (this.symbolTop[key] && this.symbolTop[key].kline !== null && this.myEcharts[key]) {
              this.symbolTop[key].kline.length > 100 && this.symbolTop[key].kline.shift()
              this.symbolTop[key].kline.push([data.tick.id, data.tick.close])
              this.klineData = this.symbolTop[key].kline
              this.klineKey = key
              this.eachart(this.symbolTop[key].kline, key)
            }
          } else if (data.tick) { // 24小时行情
            let d = data.tick
            let key = data.channel.split('_')[1]
            let topMN = this.symbolTop[key].name.split('/')[1]  // 当前市场
            let j = this.baseData._symbols[topMN][this.symbolTop[key].name].price // 当前市场信息
            let oldClose = this.symbolTop[key].close.data // 上次价格
            let close = this._P.fixD(d.close, j)
            let rate = this._P.fixRate(d.close, this.baseData._rate, topMN)
            let Od = parseFloat(oldClose)
            let cs = parseFloat(close)
            let rs = ''
            if (Od + '' !== 'NaN') {
              cs > Od && (rs = 'c-fall')
              cs < Od && (rs = 'c-rise')
              cs === Od && (rs = '')
            }
            this.symbolTop[key].close = {
              class: rs,
              data: close + '/' + rate
            }
            let num = Math.abs(d.rose * 10000 / 100)
            let rose = null
            let rc = null
            if (isNaN(num)) {
              rose = '0.00%'
            } else {
              rose = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/)) + '%'
              if (d.rose < 0) {
                rc = 'c-fall'
                rose = '-' + rose
              }
              if (d.rose > 0) {
                rc = 'c-rise'
                rose = '+' + rose
              }
              d.rose === 0 && (rc = '')
            }
            this.symbolTop[key].rose = {
              class: rc,
              data: rose
            }
            this.symbolTop[key].amount = this._P.fixD(d.amount, j)
            this.$forceUpdate()
          }
        }
      }
      this.topMarket.onclose = evt => {
        console.log('关闭', evt)
      }
      this.topMarket.onerror = evt => {
        console.log('错误', evt)
      }
    },
    symbolTopList () {
      for (let i = 0; i < this.$store.state.baseData._topSymbol.length; i++) {
        let s = this.$store.state.baseData._topSymbol[i]
        let sMarket = s.split('/')[1]
        let sWs = s.toLowerCase().split('/')
        let key = sWs[0] + sWs[1]
        this.symbolTop[key] = {
          close: {
            class: '',
            data: '--'
          },
          rose: {
            class: '',
            data: '--'
          },
          amount: '--',
          name: s,
          kline: null
        }
        this.$forceUpdate()
        if (this.$store.state.baseData._symbols[sMarket] && this.$store.state.baseData._symbols[sMarket][s]) {
          this.sendsymbolTop(key)
          this.myEcharts[key] = false
        }
      }
    },
    sendsymbolTop (symbol) {
      if (!this.topMarket) return
      this.topMarket.send(JSON.stringify({
        event: 'sub',
        params: {
          channel: 'market_' + symbol + '_ticker',
          cb_id: symbol
        }
      }))
      this.topMarket.send(JSON.stringify({
        event: 'req',
        params: {
          channel: 'market_' + symbol + '_kline_1min',
          cb_id: symbol
        }
      }))
      this.topMarket.send(JSON.stringify({
        event: 'sub',
        params: {
          channel: 'market_' + symbol + '_kline_1min',
          cb_id: symbol
        }
      }))
    },
    markList () {
      !this.markTitle && (this.markTitle = this.baseData._maket_index)
      let sList = this.baseData._symbols[this.markTitle]
      this.symbolListData = {}
      this.lastSymbol = []
      for (let item in sList) {
        let unit = sList[item].name.split('/')[1] // 获得当前市场 例：'BTC'
        if (this.baseData._symbols[unit][item]) {
          this.symbolListData[sList[item].name] = {
            isShow: true,
            close: {
              class: '',
              data: '--'
            },
            rose: {
              class: '',
              data: '--'
            },
            high: '--',
            low: '--',
            vol: '--',
            amount: '--',
            isMain: this.baseData._symbols[unit][item].isMain  // 胖虎添加
          }
          this.lastSymbol.push(sList[item].symbol) // ['bchusdt']
          this.sedWs(sList[item].symbol, 'sub')
        }
      }
    },
    sedWs (symbol, type) {
      this.marketListWS.send(JSON.stringify({ // 向后台发送实时的交易对
        event: type,
        params: {
          channel: 'market_' + symbol + '_ticker',
          cb_id: symbol
        }
      }))
    },
    addWsListData (name, data) { // 参数1 币对    参数2 这个币对的行情信息
      let t = this.symbolListData[name] // 币对 的行情信息
      let thisMarket = this.baseData._symbols[name.split('/')[1]]
      // 最新价
      let oldClose = t.close.data
      let close = this._P.fixD(data.close, thisMarket[name].price)
      let rate = this._P.fixRate(data.close, this.baseData._rate, name.split('/')[1].toUpperCase())
      let Od = parseFloat(oldClose)
      let cs = parseFloat(close)
      let rs = ''
      if (Od + '' !== 'NaN') {
        cs > Od && (rs = 'c-fall') // 跌
        cs < Od && (rs = 'c-rise') // 涨
        cs === Od && (rs = '') // 涨跌幅为 0
      }
      t.close = {
        class: rs,
        data: close + '/' + rate   // 价格 / 折合人民币
      }
      let symbolname = name.split('/')[0]  // 币对 前
      let coin = name.split('/')[1] // 币对 后
      t.symbolname = symbolname
      t.coin = coin
      t.symbol = symbolname + '/' + coin
      // 涨跌
      let num = Math.abs(data.rose * 10000 / 100)
      let rose = null
      let rc = null
      if (isNaN(num)) {
        rose = '0.00%'
      } else {
        rose = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/)) + '%'
        if (data.rose < 0) {
          rc = 'c-fall'
          rose = '-' + rose
        }
        if (data.rose > 0) {
          rc = 'c-rise'
          rose = '+' + rose
        }
        if (data.rose === 0) {
          rc = ''
          rose = '0.00%'
        }
      }
      t.rose = {
        class: rc,
        data: rose
      }
      t.high = this._P.fixD(data.high, thisMarket[name].price)
      t.high = this._P.lastD(t.high) // 去除小数点最后面得0

      t.low = this._P.fixD(data.low, thisMarket[name].price)
      t.low = this._P.lastD(t.low)

      t.vol = this._P.fixD(data.vol, thisMarket[name].volume)
      t.vol = this._P.lastD(t.vol)

      t.amount = this._P.fixD(data.amount, thisMarket[name].price)
      t.amount = this._P.lastD(t.amount)
      // this.aaa = this._P.fixD(data.amount, thisMarket[name].price)
      this.$forceUpdate()
    },
    changeMysymbol (symbol) { // 是否加入自选市场
      if (this.myMarket.indexOf(symbol) > -1) {
        this.myMarket = this.myMarket.filter(function (item, index, array) {
          return item !== symbol
        })
      } else {
        this.myMarket.push(symbol)
      }
      localStorage.setItem('myMarket', this.myMarket)
      let newMyMarket = {}
      for (let i = 0; i < this.myMarket.length; i++) {
        let tempSymbol = this.myMarket[i].split('/')
        newMyMarket[this.myMarket[i]] = {
          'name': this.myMarket[i],
          'symbol': tempSymbol[0].toLowerCase() + tempSymbol[1].toLowerCase()
        }
      }
      this.$store.commit('MYMARKET', newMyMarket)
      if (this.baseData.isLogin) {
        this.getoptional()
      }
      /* if (this.markTitle === 'myMarket') {
        for (let i = 0; i < this.symbolListArr.length; i++) {
          if (this.symbolListArr[i].symbol === symbol) {
            this.symbolListArr.splice(i, 1)
          }
        }
        for (let i = 0; i < this.symbolListInnovationArr.length; i++) {
          if (this.symbolListInnovationArr[i].symbol === symbol) {
            this.symbolListInnovationArr.splice(i, 1)
          }
        }
      } */
    },
    getoptional () {
      this.axios({
        url: this.$store.state.url.common.optional_symbol,
        headers: {},
        params: {
          optional_symbol: this.myMarket,
          time: new Date().getTime()
        },
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
        } else {
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    },
    issue () { // 搜索框聚焦的样式变化
      this.frame = true
    },
    lose () { // 搜索框失去脚点的样式变化
      this.frame = false
    },
    marketSor (val) { // 24H涨跌排序
      if (val !== this.sortName || this.sortType === 'ups') {
        this.symbolListArr = this.quickSort(this.symbolListArr, val).reverse() // 主板区排序
        this.symbolListInnovationArr = this.quickSort(this.symbolListInnovationArr, val).reverse() // 创新区排序
        this.sortName = val
        this.sortType = 'dow'
      } else {
        this.symbolListArr = this.quickSort(this.symbolListArr, val) // 主板区排序
        this.symbolListInnovationArr = this.quickSort(this.symbolListInnovationArr, val) // 创新区排序
        this.sortType = 'ups'
      }
    },
    marketSort (val) { // 最新价排序
      if (val !== this.sortName || this.sortType === 'up') {
        this.symbolListArr = this.quickSort(this.symbolListArr, val).reverse() // 主板区排序
        this.symbolListInnovationArr = this.quickSort(this.symbolListInnovationArr, val).reverse() // 创新区排序
        this.sortName = val
        this.sortType = 'down'
      } else {
        this.symbolListArr = this.quickSort(this.symbolListArr, val) // 主板区排序
        this.symbolListInnovationArr = this.quickSort(this.symbolListInnovationArr, val) // 创新区排序
        this.sortType = 'up'
      }
    },
    quickSort (dataArrer, key) {
      if (dataArrer.length <= 1) {
        return dataArrer
      }
      let index = Math.floor(dataArrer.length / 2)
      let temp = dataArrer.splice(index, 1)
      let leftArr = []
      let rightArr = []
      for (let i = 0; i < dataArrer.length; i++) {
        if (parseFloat(dataArrer[i][key]['data']) < parseFloat(temp[0][key]['data']) || dataArrer[i][key]['data'] === '--') {
          leftArr.push(dataArrer[i])
        } else {
          rightArr.push(dataArrer[i])
        }
      }
      return this.quickSort(leftArr, key).concat(temp, this.quickSort(rightArr, key))
    },
    transaction (item) { // 跳转至币币交易页面
      localStorage.setItem('sSymbolName', item)
      localStorage.setItem('markTitle', this.markTitle)
      this.$router.push({ name: 'coinTran' })
    },
    // 胖虎新增
    // 成交量排序
    volSort (val) {
      if (val !== this.sortName || this.sortType === 'volUp') {
        this.symbolListArr = this.volAmountSort(this.symbolListArr, val).reverse()
        this.symbolListInnovationArr = this.volAmountSort(this.symbolListInnovationArr, val).reverse()
        this.sortName = val
        this.sortType = 'volDow'
      } else {
        this.symbolListArr = this.volAmountSort(this.symbolListArr, val)
        this.symbolListInnovationArr = this.volAmountSort(this.symbolListInnovationArr, val)
        this.sortType = 'volUp'
      }
    },
    // 成交金额排序
    amountSort (val) {
      if (val !== this.sortName || this.sortType === 'amountUp') {
        this.symbolListArr = this.volAmountSort(this.symbolListArr, val).reverse()
        this.symbolListInnovationArr = this.volAmountSort(this.symbolListInnovationArr, val).reverse()
        this.sortName = val
        this.sortType = 'amountDow'
      } else {
        this.symbolListArr = this.volAmountSort(this.symbolListArr, val)
        this.symbolListInnovationArr = this.volAmountSort(this.symbolListInnovationArr, val)
        this.sortType = 'amountUp'
      }
    },
    // 排序函数
    volAmountSort (dataArrer, key) {
      if (dataArrer.length <= 1) {
        return dataArrer
      }
      let index = Math.floor(dataArrer.length / 2)
      let temp = dataArrer.splice(index, 1)
      let leftArr = []
      let rightArr = []
      for (let i = 0; i < dataArrer.length; i++) {
        if (parseFloat(dataArrer[i][key]) < parseFloat(temp[0][key]) || dataArrer[i][key] === '--') {
          leftArr.push(dataArrer[i])
        } else {
          rightArr.push(dataArrer[i])
        }
      }
      return this.volAmountSort(leftArr, key).concat(temp, this.volAmountSort(rightArr, key))
    },
    // 页面滚动事件
    handleScroll () {
      const _this = this
      if (_this.$refs.market) {
        const marketTop = _this.$refs.market.getBoundingClientRect().top
        const marketBottom = _this.$refs.market.getBoundingClientRect().bottom
        if (marketTop < 80 && marketBottom > 0) {
          _this.$refs.marketHeader.classList.add('headerFixed')
          _this.$refs.tableDiv.classList.add('tableDivFixed')
          _this.$refs.market.style.paddingTop = '80px'
          this.headerOpacity0() // 触发header组件
        } else {
          _this.$refs.marketHeader.classList.remove('headerFixed')
          _this.$refs.tableDiv.classList.remove('tableDivFixed')
          _this.$refs.market.style.paddingTop = '0'
          this.headerOpacity1() // 触发header组件
        }
      }
    },
    // 头部导航得隐藏
    headerOpacity0 () {
      // 这里要用双引号
      eventBus.$emit('changeOpacity', "0")
    },
    // 头部导航显示
    headerOpacity1 () {
      // 这里要用双引号
      eventBus.$emit('changeOpacity', "1")
    },
    // 主板区 和 创新区 介绍
    mainRemarkClick () {
      this.showMainRemark = true
      this.showInnovateRemark = false
    },
    innovateRemarkClick () {
      this.showInnovateRemark = true
      this.showMainRemark = false
    },
    // 关闭介绍弹窗
    closeRemark () {
      this.showInnovateRemark = false
      this.showMainRemark = false
    },
    // 首页顶部行情区块 的小板块 跳转币币交易
    async toCoinTrade (symbol) {
      let market = symbol.split('/')[1]
      await this.tabTog(market) // 切换市场
      await this.transaction(symbol)
    }
  }
}
</script>
